<template>
	<view>
		<view class="order-list" v-for="item in dataList" :key="item" @click="jumpPage(item)">
			<view class="order-list-item order-list-title">
				<view class="item-title">{{ item.equipmentDbInfo.eqName || "" }}</view>
				<u-icon name="arrow-right" size="24rpx"></u-icon>
			</view>
			<view class="order-list-item u-m-t-20">
				<view class="">订单号</view>
				<view class="">{{ item.id }}</view>
			</view>
			<view class="order-list-item">
				<view class="">开始时间</view>
				<view class="">{{ item.startTime || '' }}</view>
			</view>
			<view class="order-list-item">
				<view class="">结束时间</view>
				<view class="">{{ item.endTime || '未结束' }}</view>
			</view>
			<view class="order-list-item order-list-bottom">
				<view class="">
					<text class="custom-icon custom-icon-time color-primary"></text>
					<text class="bottom-item-text">{{ filterTimeFunc(item) }}</text>
				</view>
				<view class="order-list-item">
					<u-icon name="rmb-circle" color="#fa3534"></u-icon>
					<text class="bottom-item-text">{{ item.amount }}元</text>
				</view>
				<view class="">
					<text class="custom-icon custom-icon-wangluoduankou color-Warning"></text>
					<text class="bottom-item-text">{{ item.equipmentProp }}号端口</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { filterTime } from './data.js';
export default {
	props: {
		// 订单列表
		dataList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			filterTime
		};
	},
	methods: {
		// 跳转到订单详情
		jumpPage(item) {
			uni.navigateTo({
				url: `/packMyself/myOrder/info?id=${item.id}`
			});
		},
		//
		// 格式化时间
		filterTimeFunc(item) {
			return this.filterTime(item);
		}
	}
};
</script>

<style lang="scss">
.order-list {
	margin: 30rpx;
	background: #fff;
	border-radius: 5rpx;
	padding: 20rpx;
	.order-list-item {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #999;
		.item-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #000;
		}
	}
	.order-list-title {
		margin-bottom: 5rpx;
	}
	.order-list-bottom {
		border-top: 1px #ccc solid;
		margin-top: 14rpx;
		padding-top: 14rpx;
		.bottom-item-text {
			color: #333;
			margin-left: 10rpx;
		}
		.color-primary {
			color: $u-primary;
		}
		.color-Warning {
			color: $u-warning;
		}
	}
}
</style>
